{include file="layout/header" /}
<script>
    //JavaScript代码区域
    layui.use(['table','element','jquery'], function(){
        var table = layui.table;
        var element = layui.element;
        var jquery = layui.jquery;

        //向世界问个好
        //layer.msg('Hello yuexiaolei');

        //第一个实例
        table.render({
            elem: '#demo'
            ,height: ''
            ,url: "{:url('UserList/doUserList')}" //数据接口
            ,toolbar:'default'
            ,page: true //开启分页
            ,cols: [[ //表头
                {type: 'checkbox', title: '', fixed: 'left'}
                ,{field: 'id', title: 'ID', width:130, sort: true, fixed: 'left'}
                ,{field: 'title', title: '用户名', width:130}
                ,{field: 'sex', title: '性别', width:130, sort: true}
                ,{field: 'city', title: '城市', width:130}
                ,{field: 'like', title: '爱好', width: 130, sort: true}
                ,{field: 'birthday', title: '生日', width: 150, sort: true}
                ,{field: 'right', title: '操作',toolbar:'#barDemo'}
            ]]
        });

        //监听头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data; //获取选中的数据
            var ids = '';
            for(i=0;i<data.length;i++){
                ids += data[i].id+',';
            }
            //console.log(ids);
            switch(obj.event) {
                case 'add':
                    layer.open({
                        // 标题信息
                        title: '添加数据',
                        type: 2,
                        area: ['600px', '650px'],
                        content: "{:url('UserList/addUser')}",
                        // 关闭窗口
                        btn: '关闭窗口',
                    });
                //window.location.reload();
            }
        });

        //监听工具条
        table.on('tool(test)', function(obj){
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            //console.log(checkStatus);
            if(layEvent === 'detail'){ //查看
                //do somehing
                layer.open({
                    type: 0,
                    anim:5,
                    title:'数据信息展示',
                    area:['400px','400px'],
                    content: 'id：'+obj.data.id+'<br/>'+'标题：'+obj.data.title+'<br/>'+'城市：'+obj.data.city+'<br/>'+'爱好：'+obj.data.like+'<br/>'+'性别：'+obj.data.sex+'<br/>'+'图片：<div><img src="'+ obj.data.file +'" width="200px" height="150px"></div>'+'<br/>'+'描述：'+obj.data.desc+'<br/>'
                    //content:'id：'+'<input type="text" value="'+obj.data.id+'">',
                });
            }
        });
    });
</script>
{include file="layout/footer" /}